<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="listBox">
      <div class="listEmpty" v-if="!ulist.length">
        <div class="emptyBox">
          <img
            class="empty_img"
            src="../../assets/image/empty_icon01.png"
            alt=""
          />
          <div class="empty_title">暂无比赛</div>
        </div>
      </div>
      <div v-else>
        <div class="list" v-for="(item, index) in ulist" :key="index">
          <div class="imgBox">
            <img
              v-if="!item.image_path"
              class="img"
              src="../../assets/image/login_img01.png"
              alt=""
            />
            <img v-else class="img" :src="item.image_path" alt="" />
          </div>
          <div class="msgBox" @click="goDetails(item.id)">
            <div class="title">{{ item.title }}</div>
            <div class="adress">{{ item.address }}</div>
            <span class="time"
              >{{ item.start_date }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="../../assets/css/game/uList.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
import { Indicator, Toast } from "mint-ui";
// import { Router } from "express";

export default {
  name: "uList",
  components: {
    HomeTop,
  },
  data() {
    return {
      topTitle: "",
      ulist: [],
      id: "", //赛事id、
      // 顶部组件参数设置
    };
  },
  // created(){},
  mounted() {
    if (this.$route.query.grade == "1") {
      this.topTitle = "U7";
    } else if (this.$route.query.grade == "2") {
      this.topTitle = "U8";
    } else if (this.$route.query.grade == "3") {
      this.topTitle = "U10";
    } else if (this.$route.query.grade == "4") {
      this.topTitle = "U12";
    }
    this.evelist();
  },
  methods: {
    evelist() {
      let url = "/mobile/eventList";
      let data = {
        category_id: this.$route.query.id,
        grade: this.$route.query.grade,
        type: this.$route.query.type,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((res) => {
          Indicator.close();
          if (res.code == 0) {
            this.ulist = res.event;
          } else {
            Toast({
              message: res.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    goDetails(e) {
      this.id = e;
      sessionStorage.setItem("id", this.id); //赛事ID
      this.$router.push({
        name: "uDetails",
        query: {
          id: e,
        },
      });
    },
  },
};
</script>
<style>
.home_top_title {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
</style>
